import 'package:flutter/material.dart';

class FormDemo extends StatelessWidget {
  FormDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FormDemo'),
        elevation: 0.0,
      ),
      body: Theme(
        data: Theme.of(context).
        copyWith( //拷贝main.dart主题 重新设置主题色
          primaryColor: Colors.white,
        ),
        child: ThemeDemo(),
      ),
    );
  }
}

class ThemeDemo extends StatelessWidget {
  const ThemeDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Theme.of(context).primaryColor,
      child: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextFieldDemo(),
            RegisterForm()
          ],
        ),
      ),
    );
  }
}

class TextFieldDemo extends StatefulWidget {
  const TextFieldDemo({super.key});

  @override
  State<TextFieldDemo> createState() => _TextFieldDemoState();
}

class _TextFieldDemoState extends State<TextFieldDemo> {
  final textEditingController = TextEditingController();

  @override
  void dispose() {
    // TODO: implement dispose
    textEditingController.dispose();
    super.dispose();
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    textEditingController.text = 'hi';
    textEditingController.addListener(() {
      debugPrint('input: ${textEditingController.text}');
    });
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      decoration: InputDecoration(
        icon: Icon(Icons.subject),
        labelText: 'Title',
        hintText: 'enter the post title',
        border: InputBorder.none,
        // border: OutlineInputBorder(),
        filled: true,
        // fillColor: Colors.black

      ),
      controller: textEditingController,
      // onChanged: (value){
      //   debugPrint('input: $value');
      // },
      onSubmitted: (value){
        debugPrint('submit: $value');
      },
    );
  }
}

class RegisterForm extends StatefulWidget {
  const RegisterForm({super.key});

  @override
  State<RegisterForm> createState() => _RegisterFormState();
}

class _RegisterFormState extends State<RegisterForm> {
  final registerFormKey = GlobalKey<FormState>();
  late String username, password;

  void submitRegisterForm(){
    if(registerFormKey.currentState!.validate()) {
      registerFormKey.currentState?.save();

      debugPrint('username: $username');
      debugPrint('password: $password');
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Registering...'))
      );
    }
  }

  String? validateUsername(value){
    if(value.isEmpty){
      return 'Username is required';
    }
    return null;
  }

  String? validatePassword(value){
    if(value.isEmpty){
      return 'Password is required';
    }
    return null;
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: registerFormKey,
      child: Column(
        children: [
          TextFormField(
            decoration: const InputDecoration(
              labelText: 'Username',
              helperText: '',
              hintText: 'please enter your username'
            ),
            onSaved: (value){
              username = value!;
            },
            validator: validateUsername, //验证
            autovalidateMode: AutovalidateMode.onUserInteraction, //自动验证
          ),
          const SizedBox(height: 12.0,),
          TextFormField(
            obscureText: true,
            decoration: const InputDecoration(
              labelText: 'Password',
              hintText: 'please enter your password',
              helperText: ''
            ),
            onSaved: (value){
              password = value!;
            },
            validator: validatePassword,
          ),
          const SizedBox(height: 32.0,),
          Container(
            width: double.infinity,
            child: RaisedButton(
              color: Theme.of(context).accentColor,
              child: Text('Register',style: TextStyle(color: Colors.white)),
              elevation: 0.0,
              onPressed: submitRegisterForm
            ),
          )
        ],
      ),
    );
  }
}